@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  scroll-behavior: smooth;
  font-family: system-ui, sans-serif;
}

.scroll-def{
  scroll-behavior: auto;
}
@layer components {
  .book-search-input{
    @apply w-72 bg-transparent dark:border-gray-200/20 border-gray-300 border rounded-xl pr-3 pl-8 h-8 outline-none caret-sky-500
    dark:text-gray-300 text-gray-600 focus:border-gray-400 duration-200 dark:focus:border-gray-200/40;
    &::placeholder{
      @apply font-light;
    }
  }

  .header {
    @apply dark:bg-[rgba(34,34,34,.8)] bg-[rgba(255,255,255,.8)] fixed left-0 top-0 w-full h-12 border-b border-gray-100 dark:border-white/5 flex justify-center z-50 backdrop-blur-lg;
  }

  .header-content {
    @apply px-5 h-full flex justify-between items-center w-full;
  }

  .doc-container {
    @apply flex justify-center w-full min-h-screen;
    .content {
      @apply pt-16 pb-20 flex-1 px-6 md:px-8;
      max-width: min(900px, 100vw);
    }
  }

  .header-name {
    @apply font-medium text-base text-gray-700 dark:text-gray-300 mr-4 flex items-center;
  }

  .content {
    .link{
      @apply text-sky-500 hover:text-sky-600 duration-200 cursor-pointer;
    }
    pre{
      overflow: auto;
    }
    h1, h2, h3, h4, h5 {
      position: relative;

      .anchor {
        @apply absolute -top-16 opacity-0;
      }
    }

    blockquote {
      margin-bottom: 12px;
    }

    .heading {
      @apply border-b dark:border-gray-200/10 border-gray-200 py-2;
      &:before {
        content: '#';
        display: block;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        opacity: 0;
        @apply font-bold text-sky-500;
      }

      &:hover:before {
        opacity: 1;
      }
    }
  }
  .leading-container{
    @apply top-0 h-screen sticky duration-200 w-0 opacity-0 overflow-hidden hidden;
    &:after{
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      height: 30px;
      background: linear-gradient(transparent, var(--bg));
      z-index: 10;
    }
    &.visible {
      @apply w-[260px] opacity-100;
    }
  }
  .leading {
    width: 260px;
    padding-top: 80px;
    height: calc(100% - 10px);
    &::-webkit-scrollbar{
      display: none;
    }
    @apply dark:border-gray-200/20 border-gray-200 px-5 pb-10 overflow-y-auto;
    &-title {
      @apply dark:text-gray-500 text-gray-400 text-sm mb-4 font-semibold;
    }

    &-list {
      @apply dark:text-gray-400 text-gray-500 text-[13px] leading-5 flex-1;
    }

    &-item {
      @apply cursor-pointer dark:hover:text-gray-200 hover:text-gray-700 py-1 block;
      &.active {
        @apply text-sky-500;
      }
    }
  }
  .code-highlight code{
    padding-right: 24px;
  }
  .director {
    padding-top: 66px;
    width: 280px;
    @apply pr-5 pl-3 h-screen sticky top-0 overflow-y-auto pb-10;
    >.d-item:first-child{
      margin-top: 0;
    }
    .d-item {
      margin-top: 2px;
    }
  }
  @media screen and (max-width: 1024px) {
    .director {
      @apply fixed z-[300] max-w-[360px] w-4/5 left-0 top-0 pt-5 h-screen pb-10 bg-white duration-300 -translate-x-full px-3 dark:bg-[#252525];
      &.open{
        @apply translate-x-0;
      }
    }
    #theme{
      @apply dark:bg-zinc-800 bg-white;
    }
    #search{
      @apply fixed w-[calc(100vw_-_40px)] left-5 top-[70px] z-50 dark:bg-zinc-800 bg-white;
      &.open{
        @apply block;
      }
      input{
        @apply w-full;
      }
    }
  }

  .d-title {
    @apply flex relative items-center rounded cursor-pointer text-gray-600 dark:hover:bg-white/5 hover:bg-gray-200/30 font-medium
    hover:text-gray-700 dark:hover:text-gray-100 dark:text-gray-400 leading-6 text-sm px-2 py-1;
    &.active {
      @apply text-sky-500 dark:bg-white/5 hover:text-sky-500 bg-gray-200/30;
    }
    &.dir{
      @apply hover:bg-none dark:hover:bg-none;
    }
  }
  .d-sub {
    @apply pl-4;
  }
}
.hide {
  opacity: 0;
}

.mermaid-container{
  background: none !important;
}

.link{
  @apply text-blue-600 hover:text-blue-400 duration-200;
}
.paging{
  font-size: 14px;
  @apply flex flex-col justify-center rounded border hover:border-sky-500 dark:hover:border-sky-500
  dark:border-gray-600/50 border-gray-300 flex-1 py-2 px-5 cursor-pointer duration-200;
}
.paging-name{
  @apply text-sm mt-1 text-sky-500 font-medium group-hover:text-sky-600 duration-200;
}

th,td{
  height: 36px;
}

.code-highlight {
  .line{
    display: inline-block;
  }
  pre{
    @apply leading-4;
  }
}


.header-icon{
  @apply dark:hover:bg-gray-200/10 hover:bg-gray-100 duration-200
  rounded cursor-pointer items-center justify-center
  font-bold dark:text-gray-400 text-gray-600;
}

[data-fnc],[data-fnd] {
  cursor: pointer;
}

.ant-btn-primary {
  background-color: #1677ff;
}
.home-list{
  li{
    &::marker{
      @apply text-sky-500;
    }
  }
}

.index-title{
  background: linear-gradient(45deg, #0ea5e9, #6366f1);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  color: transparent;
}
